<template>
  <div class="container">
    <nav-bar title="门店管理" />
    <div class="main-img">
      <img class="banner" src='../../assets/img/belong-man-1.jpg' />
      <div class="infor">
        <div class="name">
          <h3>{{shopInfo.ShopBranchName}}</h3>
          <!-- <i class="edit">
            <img src='../../assets/img/icon-edit.png' />
          </i> -->
        </div>
        <div class="list">
          <div class="item">
            <p>{{shopInfo.AddressFullName}}</p>
            <i class="position">
              <img src='../../assets/img/icon-position.png' />
            </i>
          </div>
          <a class="item" :href="'tel:' + shopInfo.ContactPhone">
            <p>联系方式: {{shopInfo.ContactPhone}}</p>
            <i class="tel">
              <img src='../../assets/img/icon-tel.png' />
            </i>
          </a>
          <div class="item">
            <p>营业时间: {{shopInfo.StoreOpenStartTime}}-{{shopInfo.StoreOpenEndTime}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 产品分类 -->
    <div class="product-tabs">
      <switch-tab 
        :tabList="tabList" 
        :curTabIndex="curTabIndex"
        @itemClicked="tabClicked" 
      />
    </div>
    <!-- 最新动态 -->
    <div class="shop-list" v-show="curTabIndex === 0">
      <div 
        class="item" 
        v-for="(item, index) in news" 
        :key="index"
        @click="goToNewsDetail(item.Id)"
      >
        <div class="intro">
          <h3>{{item.Title}}</h3>
          <div class="time">
            <em>{{item.AddDate}}</em>
          </div>
        </div>
        <div class="img">
          <img :src='item.IconUrl' />
        </div>
      </div>
      <!-- <div class="btn-cart">
        <div class="btn-in">发布动态</div>
      </div> -->
    </div>
    <!-- 课程活动 -->
    <div class="belong-man" v-show="curTabIndex === 1">
      <div 
        class="item" 
        @click="goToClassDetail(item.Id)"
        v-for="(item, index) in shopProducts" :key="index"
      >
        <div class="img">
          <img :src='item.DefaultImage' />
          <!-- <div class="label">主理人专场</div> -->
        </div>
        <div class="intro">
          <div class="name">{{item.ProductName}}</div>
          <div class="dis">
            <p>{{item.VirtualInfo.StartDate}}</p>
            <p>{{item.VirtualInfo.UseNotice}}</p>
          </div>
          <div class="more" style="margin-top: 8px">立即查看</div>
        </div>
      </div>
      <!-- <div class="btn-cart">
        <router-link to="/activePub" class="btn-in">活动发布</router-link>
      </div> -->
    </div>
    <!-- 关于我们 -->
    <div class="about-us" v-show="curTabIndex === 2">
      <div class="name">{{shopInfo.shopbranchName}}</div>
      <!-- <img src='../../assets/img/shop-about.jpg' /> -->
      <img :src='shopInfo.ShopImages' />
      <div class="dis">
        <p>{{shopInfo.Description}}</p>
      </div>
      <!-- <div class="btn-cart">
        <div class="btn-in">编辑关于我们</div>
      </div> -->
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import SwitchTab from 'components/common/SwitchTab'
import { getMyShop, getBelongInfo } from '../../network/belong'
import { getShopProducts, getShopBranchInfo, getShopBranchNews } from '../../network/shop'
import { format } from 'date-fns'

export default {
  components: {
    NavBar,
    SwitchTab,
  },
  data(){
    return {
      userKey: localStorage.getItem('userKey'),
      shopInfo: {},
      shopProducts: [],
      news: [],
      curTabIndex: 0,
      tabList: [
        '最新动态',
        '课程活动',
        '关于我们'
      ],
    }
  },
  async mounted() {
    // 从课程活动 商家链接跳转过来
    let shopId = this.$route.query.shopId

    // 从主理人的门店管理跳转过来
    if(!shopId){
      await this.getMyShop()
      shopId = this.shopInfo.ShopBranchId
    }
    
    this.getShopById(shopId)
    this.getShopBranchNews(shopId)
  },
  methods: {
    getMyShop(){
      return new Promise(resolve => {
        let requestData = {
          userkey: this.userKey
        }
        getMyShop(requestData, shop => {
          this.shopInfo = shop
          resolve()
        })
      })
    },
    getShopById(shopId){
      let requestData = {
        id: shopId,
        fromLatLng: ''
      }
      getShopBranchInfo(requestData, shop => {
        shop = shop.Store
        shop.StoreOpenStartTime = shop.StoreOpenStartTime.substr(0, 5)
        shop.StoreOpenEndTime = shop.StoreOpenEndTime.substr(0, 5)
        this.shopInfo = shop

        this.getProducts(shopId)
      })
    },
    getShopBranchNews(shopId){
      let requestData = {
        shopId
      }
      getShopBranchNews(requestData, list => {
        list.map(item => {
          item.AddDate = format(new Date(item.AddDate), 'yyyy-MM-dd HH:mm:ss')
          return item
        })
        this.news = list
      })
    },
    // 获取课程列表
    getProducts(shopId){
      let requestData = {
        type: 0,
        bId: shopId,
      }
      getShopProducts(requestData, products => {
        this.shopProducts = products
      })
    },
    tabClicked(e){
      this.curTabIndex = e
    },
    goToNewsDetail(id){
      this.$router.push({
        path: '/newsDetail',
        query: {
          id
        }
      })
    },
    goToClassDetail(id){
      this.$router.push({
        path: '/classDetail',
        query: {
          type: 'belong',
          id
        }
      })
    }
  },
}
</script>

<style scoped>
.container{
  /* padding-bottom: 70px; */
  padding-bottom: 0px;
}
.main-img img.banner{
  position: relative;
  width: 100%;
}
.main-img .infor{
  font-size: 12px;
  position: relative;
  margin: -72px 10px 0 10px;
  border-radius: 5px;
  padding: 15px 20px;
  background-color: #ffffff;
}
.main-img .infor .name{
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main-img .infor .name img{
  width: 16px;
  height: 16px;
}
.main-img .infor .name h3{
  font-size: 16px;
}
.main-img .list{
  line-height: 2;
}
.main-img .list .item{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main-img .list .item img{
  width: 14px;
  height: 14px;
}

.product-tabs{
  padding: 10px;
}
.product-tabs .tabs-list{
  display: flex;
  margin: 0 10px;
  justify-content: space-between;
  align-items: center;
}
.product-tabs .tabs-list .item{
  flex-shrink: 0;
  width: 30%;
  height: 38px;
  line-height: 38px;
  border-radius: 38px;
  text-align: center;
  font-size: 14px;
  background-color: #ffffff;
}
.product-tabs .tabs-list .item-cur{
  color: #ffffff;
  background-color: #000000;
}
.belong-man{
  padding: 0 10px;
}
.belong-man .item{
  margin-bottom: 10px;
  border-radius: 6px;
  overflow: hidden;
  background-color: #ffffff;
}
.belong-man .item .img{
  position: relative;
}
.belong-man .item img{
  width: 100%;
}
.belong-man .item .intro{
  padding: 15px 23px 20px 23px;
}
.belong-man .item .intro .name{
  font-size: 16px;
}
.belong-man .item .intro .dis{
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.8;
  padding: 12px 0;
}
.belong-man .item .intro .more{
  width: 125px;
  font-size: 12px;
  line-height: 30px;
  border: 1px solid #bbbbbb;
  text-align: center;
  border-radius: 30px;
}
.shop-list .item{
  display: flex;
  justify-content: space-between;
  margin: 0 10px 10px 10px;
  padding: 26px 30px;
  border-radius: 6px;
  background-color: #ffffff;
}
.shop-list .item .img{
  width: 100px;
}
.shop-list .item .img img{
  width: 100%;
}
.shop-list .item .intro{
  padding-right: 20px;
}
.shop-list .item .intro h3{
  font-size: 16px;
  padding-bottom: 25px;;
}
.shop-list .item .intro .time{
  color: #8c8c8c;
  font-size: 12px;
  line-height: 1;
}
.shop-list .item .intro .time span{
  display: inline-block;
  border-left: 1px solid #cccccc;
  margin-left: 20px;
  padding-left: 20px;
}
.about-us{
  border-radius: 5px;
  margin: 0 10px 20px 10px;
  padding: 25px;
  background-color: #ffffff;
}
.about-us img{
  width: 100%;
  margin-bottom: 20px;
}
.about-us .name{
  font-size: 16px;
  padding-bottom: 20px;
}
.about-us .dis{
  line-height: 2;
  color: #666666;
  font-size: 14px;
}
.btn-cart{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff, #ffffff);
}
.btn-cart .btn-in{
  display: block;
  line-height: 50px;
  border-radius: 50px;
  color: #ffffff;
  text-align: center;
  background-color: #000000;
}
</style>